<template>
	<view class="login-container">
		<!-- 顶部Logo -->
		<view class="logo-area">
			<image class="logo" src="/static/icon_@3x.png" mode="aspectFit" alt="App Logo" />
			<text class="app-name">移动办公平台</text>
		</view>

		<!-- 登录表单 -->
		<view class="form-container">
			<!-- 手机号输入 --> 
			<view class="input-group">
				<uni-icons type="phone" size="20" color="#999" class="input-icon" />
				<input v-model="form.phone" class="input" type="number" placeholder="请输入手机号" maxlength="11"
					@input="validatePhone" />
				<view v-if="showClearPhone" @tap="clearPhone" class="clear-icon">
					<uni-icons type="clear" size="18" color="#ccc" />
				</view>
			</view>
			<text v-if="phoneError" class="error-msg">{{ phoneError }}</text>

			<!-- 密码输入 -->
			<view class="input-group">
				<uni-icons type="locked" size="20" color="#999" class="input-icon" />
				<input v-model="form.password" class="input" :type="showPassword ? 'text' : 'password'"
					placeholder="请输入密码" maxlength="20" @input="validatePassword" />
				<view @tap="togglePassword" class="eye-icon">
					<!--  <uni-icons 
            :type="showPassword ? 'eye' : 'eye-slash'" 
            size="20" 
            color="#999" 
          /> -->
					显示
				</view>
			</view>
			<text v-if="passwordError" class="error-msg">{{ passwordError }}</text>

			<!-- 记住密码和忘记密码 -->
			<view class="form-options">
				<label class="remember">
					<radio :checked="rememberPassword" @tap="rememberPassword = !rememberPassword" color="#007AFF" />
					<text>记住密码</text>
				</label>
				<view @tap="navigateToForget" class="forgot-password">
					忘记密码?
				</view>
			</view>

			<!-- 登录按钮 -->
			<button class="login-btn" :disabled="!formValid" :class="{ 'disabled-btn': !formValid }" @tap="handleLogin">
				登录
			</button>

			<!-- 其他登录方式 -->
			<view class="other-login">
				<text class="divider">或使用以下方式登录</text>
				<view class="login-methods">
					<button class="icon-btn" @tap="wechatLogin">
						<uni-icons type="weixin" size="30" color="#07C160" />
						<text>微信</text>
					</button>
					<button class="icon-btn" @tap="appleLogin">
						<uni-icons type="apple" size="30" color="#000" />
						<text>Apple</text>
					</button>
				</view>
			</view>

			<!-- 注册链接 -->
			<view class="register-link">
				还没有账号?
				<text @tap="navigateToRegister" class="link-text">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: '',
					password: ''
				},
				showPassword: false,
				rememberPassword: false,
				phoneError: '',
				passwordError: ''
			};
		},
		computed: {
			// 显示清除手机号按钮
			showClearPhone() {
				return this.form.phone.length > 0;
			},
			// 表单验证状态
			formValid() {
				return this.form.phone.length === 11 &&
					this.form.password.length >= 6 &&
					!this.phoneError &&
					!this.passwordError;
			}
		},
		methods: {
			// 手机号验证
			validatePhone() {
				if (!this.form.phone) {
					this.phoneError = '手机号不能为空';
				} else if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
					this.phoneError = '请输入正确的手机号';
				} else {
					this.phoneError = '';
				}
			},

			// 密码验证
			validatePassword() {
				if (!this.form.password) {
					this.passwordError = '密码不能为空';
				} else if (this.form.password.length < 6) {
					this.passwordError = '密码至少6位';
				} else {
					this.passwordError = '';
				}
			},

			// 清除手机号
			clearPhone() {
				this.form.phone = '';
				this.phoneError = '';
			},

			// 切换密码可见性
			togglePassword() {
				this.showPassword = !this.showPassword;
			},

			// 登录处理
			handleLogin() {
				if (!this.formValid) return;

				uni.showLoading({
					title: '登录中...',
					mask: true
				});

				// 实际项目中这里调用登录API
				setTimeout(() => {
					uni.hideLoading();
					uniCloud.callFunction({
						name: 'userId',
						data: {
							phone: this.form.phone,
							password: this.form.password
						}
					}).then(res => {
						if (res.result) {
							console.log(res, '121212')
							// 存储登录状态
							uni.setStorageSync('userInfo', res.result);

							// 跳转到首页
							uni.navigateTo({
								url: '/pages/shouyeDa/index',
							});
						} else {
							uni.showToast({
								title: '账号或密码不正确',
								icon: 'error'
							});
						};
					})
				}, 1500)
			},

			// 微信登录
			wechatLogin() {
				uni.showToast({
					title: '微信登录',
					icon: 'none'
				});
			},

			// Apple登录
			appleLogin() {
				uni.showToast({
					title: 'Apple登录',
					icon: 'none'
				});
			},

			// 跳转到注册页
			navigateToRegister() {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			},

			// 跳转到忘记密码
			navigateToForget() {
				uni.navigateTo({
					url: '/pages/forget/forget'
				});
			}
		}
	};
</script>

<style scoped>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		min-height: 100vh;
		background: linear-gradient(to bottom, #f5f7fa, #e4edff);
	}

	.logo-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
		margin-bottom: 80rpx;
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.15);
	}

	.app-name {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-top: 20rpx;
		letter-spacing: 2rpx;
	}

	.form-container {
		width: 100%;
		max-width: 600rpx;
	}

	.input-group {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx 30rpx;
		margin-top: 40rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border: 1rpx solid #eee;
	}

	.input-icon {
		margin-right: 20rpx;
	}

	.input {
		flex: 1;
		font-size: 32rpx;
		height: 50rpx;
		color: #333;
	}

	.clear-icon,
	.eye-icon {
		padding: 10rpx;
		margin-left: 10rpx;
		font-size: 10px
	}

	.error-msg {
		display: block;
		color: #ff5500;
		font-size: 24rpx;
		margin-top: 12rpx;
		padding-left: 20rpx;
	}

	.form-options {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #666;
	}

	.remember {
		display: flex;
		align-items: center;
	}

	.forgot-password {
		color: #007AFF;
	}

	.login-btn {
		background: linear-gradient(to right, #007AFF, #0062CC);
		color: #fff;
		border-radius: 50rpx;
		margin-top: 60rpx;
		font-size: 34rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.3);
	}

	.disabled-btn {
		opacity: 0.6;
	}

	.other-login {
		margin-top: 80rpx;
		text-align: center;
	}

	.divider {
		display: block;
		color: #999;
		font-size: 28rpx;
		position: relative;
	}

	.divider::before,
	.divider::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 30%;
		height: 1rpx;
		background: #ddd;
	}

	.divider::before {
		left: 0;
	}

	.divider::after {
		right: 0;
	}

	.login-methods {
		display: flex;
		justify-content: center;
		gap: 80rpx;
		margin-top: 40rpx;
	}

	.icon-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: none;
		padding: 0;
		margin: 0;
		font-size: 24rpx;
		color: #666;
	}

	.icon-btn::after {
		border: none;
	}

	.register-link {
		text-align: center;
		margin-top: 60rpx;
		font-size: 28rpx;
		color: #666;
	}

	.link-text {
		color: #007AFF;
		margin-left: 10rpx;
	}
</style>